<div class="page">
    <div class="logo"><a href="#"><img src="public/img/logo.png" class="img-responsive" /></a></div>
	<div class="caythong" id="caythong">
    	<img src="public/img/caythong.png" usemap="#Map"/>
        <map name="Map">
          <area shape="rect" coords="367,146,392,181" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="292,141,311,163" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="311,170,332,196" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="400,242,436,272" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="250,212,288,258" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="337,262,357,284" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="454,329,480,362" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="350,349,383,379" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="290,414,338,453" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
          <area shape="rect" coords="489,424,530,460" href="javascript:void(0)" class="lucky_gift" data="<?php echo rand(0,99)?>">
        </map>
    </div>
    <div class="footer4"><img src="public/img/img-chiduong.png"></div>
    <div class="footer"><img src="public/img/img_home.png" /></div>
</div>
<div id="gift_content" style="display:none">
<?php 
// print html for auto popup of already gift
if(isset($already_have_gift_html))
    echo($already_have_gift_html);
?>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        //snow    
        var height = $( window ).height();
        $("#caythong").css("height",height-21);
        $.fn.snow(); 
<?php
// auto popup
if(isset($already_have_gift_html)) {
?>
        var html = $("#gift_content").html();
        $.fancybox( { content: html, wrapCSS:'fancybox-custom', closeBtn:false, hideOnOverlayClick:false, helper: { overlay:{ closeClick:false, locked:true } } } );
        $(".lucky_gift").click(function(){
            $.fancybox( { content: html, wrapCSS:'fancybox-custom', closeBtn:false, hideOnOverlayClick:false, helper: { overlay:{ closeClick:false, locked:true } } } );
        });
<?php
}
// lucky gift process
else {
?>
        $(".lucky_gift").click(function(){
            var lucky_number = $(this).attr("data");
            $.ajax({
                url: "<?php echo base_url();?>goodluck",
                type: "POST",
                data: { lnum: lucky_number }
            }).done(function( result ) {
                var r = jQuery.parseJSON(result);
                $.fancybox( { content: r.html, wrapCSS:'fancybox-custom', closeClick:false, closeBtn:false, helper: { overlay:{ closeClick:false, locked:true } } } );
            }); 
        });
    
<?php
}
?>
    });
</script>
